    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>排他性案例：大学选课</title>
      <style>
        /* 列表项的默认样式 */
        .course-list li {
          padding: 8px;
          border: 1px solid #ccc;
          cursor: pointer;
          margin: 4px;
        }
        /* 当课程被选中时的样式 */
        .active {
          background-color: #4CAF50;
          color: white;
        }
      </style>
    </head>
    <body>
      <div id="app">
        <h2>大学选课</h2>
        <p>请点击下列课程，只能选择一个主修课程：</p>
        <ul class="course-list">
          <li v-for="(course, index) in courses" 
              :key="index"
              :class="{ active: selectedIndex === index }"
              @click="selectCourse(index)">
            {{ course }}
          </li>
        </ul>
        <p v-if="selectedIndex !== null">你选择的课程是：{{ courses[selectedIndex] }}</p>
      </div>
      
      <script src="../../../js/vue.js"></script>
      <script>
        new Vue({
          el: '#app',
          data: {
            // 课程列表数据
            courses: ['计算机科学', '经济学', '心理学', '工程学', '艺术设计'],
            // 用来保存当前选中的课程索引，初始为 null 表示没有选择
            selectedIndex: null
          },
          methods: {
            // 选择课程时，更新 selectedIndex，从而实现排他性高亮效果
            selectCourse: function(index) {
              this.selectedIndex = index;
            }
          }
        });
      </script>
    </body>
    </html>